<%@page import="com.farm.parameter.FarmParameterService"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.farm.web.constant.FarmConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<style>
.wlp-hourview-chapter a {
	color: #cccccc;
}

.wlp-hourview-chapter a.active {
	color: #f75d5f;
}

.wlp-hourview-chapter .wlp-hourview-hourbox:HOVER a {
	color: #d44c4e;
	text-decoration: none;
}
</style>
<c:forEach items="${hourview.classview.chapters }" var="node">
	<div style="margin-bottom: 12px;" class="wlp-hourview-chapter">
		<h4 class="media-heading" style="font-size: 14px;">
			<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;${node.title }
		</h4>
		<c:forEach items="${hourview.classview.hours}" var="hour">
			<c:if test="${hour.chapterid ==node.id}">
				<div class="media mark${hour.id}"
					style="margin-top: 8px; color: #cccccc;">
					<div class="media-body wlp-hourview-hourbox">
						<div class="media">
							<div class="media-body">
								<h4 class="media-heading"
									style="font-weight: 200; margin-top: 3px; font-size: 14px; margin-left: 1em;">
									<c:if test="${hour.id==hourview.hour.id }">
										<a class="active"> <i
											class="glyphicon glyphicon-play-circle"
											style="top: 2px; position: relative;"></i>&nbsp;${hour.title }<span
											style="font-size: 10px; color: #999999;">&nbsp;${hour.altime}分钟</span>
										</a>
									</c:if>
									<c:if test="${hour.id!=hourview.hour.id }">
										<c:if test="${!learnView.learned }">
											<c:if test="${hour.viewAble }">
												<!-- 预览课程 -->
												<a title="预览课时"
													href="hourweb/Pubview.do?classid=${hourview.classview.classt.id}&hourid=${hour.id}">
													<i class="glyphicon glyphicon-play-circle"
													style="top: 2px; position: relative;"></i>&nbsp;${hour.title }<span
													style="font-size: 10px; color: #999999;">&nbsp;${hour.altime}分钟</span>
												</a>
											</c:if>
											<c:if test="${!hour.viewAble }">
												<!--  不能预览课程 -->
												<span title="禁止预览" style="color: #666666;"> <i
													class="glyphicon glyphicon-play-circle"
													style="top: 2px; position: relative;"></i>&nbsp;${hour.title }<span
													style="font-size: 10px; color: #666666;">&nbsp;${hour.altime}分钟</span>
												</span>
											</c:if>
										</c:if>
										<c:if test="${learnView.learned }">
											<!-- 学习课程 -->
											<a title="学习课时"
												href="hourweb/PubContinue.do?classid=${hourview.classview.classt.id}&hourid=${hour.id}">
												<i class="glyphicon glyphicon-play-circle"
												style="top: 2px; position: relative;"></i>&nbsp;${hour.title }<span
												style="font-size: 10px; color: #999999;">&nbsp;${hour.altime}分钟</span>
											</a>
										</c:if>
									</c:if>
								</h4>
							</div>
							<div class="media-right" style="font-size: 14px;">
								<!-- 1:完成2:学习中 -->
								<c:if test="${hour.userhour.pstate=='2'}">
									<span title="学习中" style="margin-right: 20px; color: #00b43c;"><i
										class="glyphicon glyphicon-play"></i></span>
								</c:if>
								<c:if test="${hour.userhour.pstate=='1'}">
									<span title="完成" style="margin-right: 20px; color: #00b43c;"><i
										class="glyphicon glyphicon-ok-sign"></i></span>
								</c:if>
								<c:if test="${empty hour.userhour.pstate}">
									<span title="未学习" style="margin-right: 20px; color: #999999;"><i
										class="glyphicon glyphicon-record"></i></span>
								</c:if>
							</div>
						</div>
					</div>
				</div>
			</c:if>
		</c:forEach>
	</div>
</c:forEach>
<script type="text/javascript">
	$(function() {
		try {
			//定位導航目錄到當前課時
			var mainContainer = $('#hourViewSiderightId'), scrollToContainer = mainContainer
					.find(".mark${hourview.hour.id}");
			//动画效果
			mainContainer.animate({
				scrollTop : scrollToContainer.offset().top
						- mainContainer.offset().top
						+ mainContainer.scrollTop() - 300
			}, 500);
		} catch (e) {
			console.error(e);
		}
	});
</script>